<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar>
            <template #right>
                <input type="text" placeholder="输入地址" class="text_1790X1">
            </template>
            <template #left>
                <van-icon name="arrow-left" @click="$router.back()" />
                <van-dropdown-menu>
                    <van-dropdown-item v-model="value" :options="option" />
                </van-dropdown-menu>
            </template>
        </van-nav-bar>

        <!-- 数据渲染 -->
        <van-cell v-for="item in addressList" @click="Passaddress(item.id)">
            <template #title>
                <div class="Houseaddress">
                    {{ item.Houseaddress }}
                </div>
            </template>
            <template #label>
                <div class="uaaddress">
                    {{ item.uaaddress }}
                </div>
            </template>

        </van-cell>
    </div>

</template>

<script setup>
import router from '@/router/index'
import { ref, reactive, onMounted} from 'vue'
import { getAddress } from '@/api/api'
const value = ref(2)
const option = [
    { text: '北京', value: 0 },
    { text: '上海', value: 1 },
    { text: '深圳', value: 2 },
];



const addressList = reactive([
    {
        id: 1,
        Houseaddress: '深圳世界之窗',
        uaaddress: '深南大道'
    },
    {
        id: 2,
        Houseaddress: '深圳站',
        uaaddress: '建设路安康大道'
    },
    {
        id: 3,
        Houseaddress: '罗湖汽车站',
        uaaddress: '罗湖商业城1层'
    },
    {
        id: 4,
        Houseaddress: '深圳西站',
        uaaddress: '学府路与月亮湾大道交汇处'
    },
    {
        id: 5,
        Houseaddress: '深圳无限强公司5',
        uaaddress: '青年公社'
    },
    {
        id: 6,
        Houseaddress: '龙岗长途汽车客运站',
        uaaddress: '龙岗大道'
    },
    {
        id: 7,
        Houseaddress: '深圳无限强公司7',
        uaaddress: '青年公社'
    },
    {
        id: 8,
        Houseaddress: '深圳北站',
        uaaddress: '民治街道北站社区致远中路'
    },
    {
        id: 9,
        Houseaddress: '深圳欢乐谷',
        uaaddress: '侨城西街'
    },
    {
        id: 10,
        Houseaddress: '蛇口邮轮中心',
        uaaddress: '海运路'
    },

])

const Passaddress = (idx) => {

    addressList.forEach((item, index) => {
        if (idx === item.id) {
            router.push({ path: '/address', query: { id: 1, Houseaddress: item.Houseaddress + item.uaaddress } })
        }
    })


}
</script>

<style lang="scss" scoped>
.van-nav-bar {
    position: sticky;
    top: 0;
    --van-nav-bar-title-font-size: 14px;

    .van-dropdown-menu {
        width: 46px;
        --van-dropdown-menu-title-text-color: black;
        --van-dropdown-menu-title-font-size: 13px;
        --van-dropdown-menu-height: 20px;
        --van-dropdown-menu-shadow: 0
    }

    .text_1790X1 {
        width: 245px;
        height: 34px;
        left: 115px;
        top: 25px;
        text-indent: 10px;
        color: rgba(166, 166, 166, 1);
        border-radius: 2px;
        font-size: 14px;
        line-height: 150%;
        border: rgba(217, 217, 217, 1) solid 1px;
        text-align: left;
    }
}

.Houseaddress {
    font-size: 15px;

    color: rgba(56, 56, 56, 1);
}

.uaaddress {
    font-size: 12px;
    color: rgba(166, 166, 166, 1);

}
</style>